import React from "react";
import Chart from "echarts-for-react";
import style from "./DataModelTu.less";

var arr = [];

class DataModelTu extends React.Component {
    componentWillReceiveProps() {

    }


    setOption = () => {
        return {
            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {

                    var res = params[0].name + "℃";

                    for (var i = 0, l = params.length; i < l; i++) {
                        if (params[i].seriesType === 'line') {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '  ' + '分钟';
                        } else {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '  ' + '℃';
                        }
                    }
                    return res;

                }
            },
            grid: {
                containLabel: true
            },
            legend: {
                data: [this.props.checkText[0], this.props.checkText[1], this.props.checkText[2], this.props.checkText[3], this.props.checkText[4], this.props.checkText[5], this.props.checkText[6]]
            },
            xAxis: [{
                type: 'category',
                name: '温度/℃',
                axisTick: {
                    alignWithLabel: true
                },
                min: 0,
                // data:[200,300,400,500,600,700]
                data: this.props.data ? this.props.data.TArray : []
            }],
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }
                // , {
                //     type: 'slider',
                //     yAxisIndex: 0,
                //     filterMode: 'empty',
                //     start: 0,
                //     end: 100
                // }
                , {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
            // visualMap: {
            //     show: false,
            //     dimension: 0,
            //     pieces: [{
            //         lte: 6,

            //     }, {
            //         gt: 6,
            //         lte: 8,
            //         color: 'red'
            //     }, {
            //         gt: 8,
            //         lte: 17,

            //     }]
            // },
            yAxis: [{
                type: 'value',
                name: '停留时间/min',
                position: 'left',

            }],
            series: arr
            //  [
            //     {
            //         name: this.props.checkText[0],
            //         type: 'line',
            //         label: {
            //             normal: {
            //                 show: false,
            //                 position: 'top',
            //             }
            //         },
            //         lineStyle: {
            //             normal: {
            //                 width: 3,
            //                 shadowColor: 'rgba(0,0,0,0.4)',
            //                 shadowBlur: 5,
            //                 shadowOffsetY: 3
            //             }
            //         },
            //         data: this.props.data && this.props.data.length> 1 ? this.props.data.index[0] : []
            //     }

            // ]
        };



    }

    render() {

        console.log(this.props)
        if (this.props.checkText.length == 0) {
            arr = []
        }
      
        for (var i = 0; i < this.props.checkText.length; i++) {
            if (arr.length < this.props.checkText.length) {
                arr.push(
                    {
                        name: this.props.checkText[i],
                        type: 'line',
                        markArea: {
                            
                            // data: [boilingList?boilingList:[]]
                            // data:[
                            //     {xAxis: 26, name: "沸点"}, {xAxis: 76}
                            // ]
                            // data: [[ {
                            //     name:"fe",
                            //     xAxis: 20
                            // }, {
                            //     xAxis: 40
                            // }]
                               
                            // ]
                        },
                        markLine: {
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    shadowColor: 'red',

                                }
                            },
                            data:this.props.data ? this.props.data.yAxisList : [],
                            //  [
                            //     {yAxis: "30", name: "30"}
                            //   {yAxis: "15", name: "15"}
                            // ]
                        

                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'top',
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 3,
                                shadowColor: 'rgba(0,0,0,0.4)',
                                shadowBlur: 5,
                                shadowOffsetY: 3
                            }
                        },

                        data: this.props.data ? this.props.data.index[i] : []
                    }
                )
            }

        }
        return (

            <Chart option={this.setOption()} notMerge lazyUpdate className={style.main}

            />




        );
    }

}

export default DataModelTu;
